<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<style>
			.f{
				color:red;
				text-align: center;
				font-size: 80px;
				border: 2px red solid;
				border-radius: 50%;
				line-height: 200px;
				height: 200px;
				
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#b1").click(function(){
					///$("p").css("font-size","100px");
					$("p").css({
						"color":"red","text-align":"center",
						"height":"200px","line-height":"200px",
						"border":"2px solid red","border-radius":"50%",
						"font-size":"100px"
					});
				});
				$("#b2").click(function(){
					$("p").addClass("f");
				});
				$("#b3").click(function(){
					$("p").toggleClass("f");
				});
			});
		</script>
	</head>
	<body>
		<p>
			教育改变生活!
		</p>
		<div>
			<button id="b1">加css</button>
			<button id="b2">加css 类样式</button>
			<button id="b3">toggle类样式</button>
		</div>
	</body>
</html>